<html>
	<head>
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
		<style type="text/css">
			table {
				border: 1px solid black;
			}
				
			table tr td, table tr th {
				border: 1px solid black;
				min-width: 120px;
				height: 50px;
				text-align: center;
			}
			
			table tr td input {
				width: 120px;
			}
			
			table tr td span {
				padding: 5px;
				text-decoration: underline;
				color: blue;
			}
			
			table tr td span:hover {
				cursor: pointer;
				text-decoration: none;
			}
			
			.hidden {
				display: none;
			}
			
			#addPackageUnitBtn {
				width: 200px;
				height: 50px;
				text-align: center;
				margin-bottom: 50px;
			}
			
			#dialog table tr td, #dialog table tr th, #dialog table {
				border: none;
			}
			
			#dialog input, #dialog select {
				width: 20em;
				height: 30px;
			}
			
			#dialog #saveBtn {
				margin-top: 30px;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<button id="addPackageUnitBtn">Add package unit</button>
		<div id="packageUnitContentHolder">
			<table cellspacing="0" cellpadding="10">
				<tr>
					<th>Id</th>
					<th>Naam</th>
					<th>Meeteenheid</th>
					<th>Hoeveelheid</th>
					<th></th>
				</tr>
				<tr tal:repeat="package packages">
					<td class="packageUnitDbuid" tal:content="package/dbuid">comment: primary key of the package unit.</td>
					<td class="packageUnitName" tal:content="package/name">comment: name of the package unit.</td>
					<td class="packageUnitMetricSystemUnitId" tal:content="package/metricSystemUnit">comment: metric system unit used by the package unit.</td>
					<td class="packageUnitQuantity" tal:content="package/quantity">comment: quantity contained by the package unit.</td>
					<td>
						<span class="editAction">edit</span>
						<span class="deleteAction">delete</span>
						<span class="saveAction hidden">save</span>
						<span class="cancelAction hidden">cancel</span>
					</td>
				</tr>
			</table>
		</div>
		<div id="dialog" title="Add package unit" class="hidden">
			<center>
				<form method="post" action="savePackageUnitAction">
					<input class="hidden" tal:attributes="value pageUrl" name="pageUrl" readonly="readonly" id="pageUrl"/>
					<table cellspacing="0" cellpadding="5">
						<tr>
							<td><label for="packageUnitNameInput">Naam package unit:</label></td>
							<td><input type="text" name="packageUnitNameInput" id="packageUnitNameInput"/></td>
						</tr>
						<tr>
							<td><label for="packageMetricSystemUnitInput">Meeteenheid:</label></td>
							<td>
								<select name="packageMetricSystemUnitInput" id="packageMetricSystemUnitInput">
									<option value="1">kg</option>
									<option value="2">l</option>
									<option value="3">piece</option>
								</select>
							</td>
						</tr>
						<tr>
							<td><label for="packageQuantityInput">Hoeveelheid:</label></td>
							<td><input type="text" name="packageQuantityInput" id="packageQuantityInput"/></td>
						</tr>
						<tr>
							<td colspan="2">
								<input type="submit" name="save" value="Save" id="saveBtn"/>
							</td>
						</tr>
					</table>
				</form>
			</center>
		</div>
	</body>
	
	<script type="text/javascript">
  
		$("#addPackageUnitBtn").click(function(){
			$("#dialog").dialog({ 
				minHeight: 300,
				width: 600,
				resizable: false
			});
		});
		
		$(".editAction").click(function(){
			var $actionsCell = $(this).parent();
			editActionClick($actionsCell);
			$row = $(this).parent().parent();
			createTextInputField($($row).find(".packageUnitName"));
			createTextInputField($($row).find(".packageUnitQuantity"));
		});
		
		$(".saveAction").click(function(){
			var $actionsCell = $(this).parent();
			saveOrCancelActionClick($actionsCell);
			
			saveNewValuesOfTextInputField($($row).find(".packageUnitName"));
			saveNewValuesOfTextInputField($($row).find(".packageUnitQuantity"));
			
			$dbuid = $($row).find(".packageUnitDbuid").html();
			$name = $($row).find(".packageUnitName").html();
			$metricSystemUnitId = $($row).find(".packageUnitMetricSystemUnitId").html();
			$quantity = $($row).find(".packageUnitQuantity").html();
			doSave($dbuid, $name, $metricSystemUnitId, $quantity);
		});
		
		$(".cancelAction").click(function(){
			var $actionsCell = $(this).parent();
			saveOrCancelActionClick($actionsCell);
			$row = $(this).parent().parent();
			restoreOldValuesOfTextInputField($($row).find(".packageUnitName"));
			restoreOldValuesOfTextInputField($($row).find(".packageUnitQuantity"));
		});
		
		$(".deleteAction").click(function(){
			$row = $(this).parent().parent();
			$dbuid = $($row).find(".packageUnitDbuid").html();
			doDelete($dbuid);
			$row.remove();
		});
		
		function editActionClick($actionsCell){
			$($actionsCell).find(".editAction").addClass("hidden");
			$($actionsCell).find(".deleteAction").addClass("hidden");
			$($actionsCell).find(".saveAction").removeClass("hidden");
			$($actionsCell).find(".cancelAction").removeClass("hidden");
		};
		
		function saveOrCancelActionClick($actionsCell){
			$($actionsCell).find(".editAction").removeClass("hidden");
			$($actionsCell).find(".deleteAction").removeClass("hidden");
			$($actionsCell).find(".saveAction").addClass("hidden");
			$($actionsCell).find(".cancelAction").addClass("hidden");
		};
		
		function createTextInputField($cell){
			$($cell).html('<input type="text" placeholder="' + $cell.html() + '" value="' + $cell.html() + '" />');
		};
		
		function restoreOldValuesOfTextInputField($cell){
			$oldValue = $($cell).find("input").attr("placeholder");
			$($cell).html($oldValue);
		};
		
		function saveNewValuesOfTextInputField($cell){
			$newValue = $($cell).find("input").val();
			$($cell).html($newValue);
		}
		
		function doDelete($dbuid){
			$.post("deletePackageUnitAction", 
					{	
						dbuid: $dbuid
					}, 
					function (data){ 
						//TODO error handling
					} 
				);
		};
		
		function doSave($dbuid, $name, $metricSystemUnitId, $quantity){
			$.post("updatePackageUnitAction", 
					{	
						dbuid: $dbuid,
						packageUnitNameInput: $name,
						packageMetricSystemUnitInput: $metricSystemUnitId,
						packageQuantityInput: $quantity
					},
					function (data){ 
						//TODO error handling
					} 
				);
		};

	</script>
</html>